<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB" xml:lang="en-GB">


<head>
<!-- Title -->
<title>multiBox - for MooTools 1.2 - now with groups!</title>
<!-- Title -->


<!-- Meta tags -->
<meta name="keywords" content="multiBox - for MooTools 1.2 - now with groups!" />
<meta name="description" content="multiBox is a reworked version of Phatfusion&acute;s brilliant multibox so that it will work with MooTools 1.2. There are many extra options including the option to group elements!" />
<meta name="revisit-after" content="3 days" />
<meta name="robots" content="index,follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Meta tags -->


<!-- Favicon -->
<link rel="shortcut icon" href="http://www.liamsmart.co.uk/Images/favicon.ico" />
<!-- Favicon -->


<!-- Copy code below -->
<link type="text/css" rel="stylesheet" href="./Styles/multiBox.css" />
<!--[if lte IE 6]>
    <link type="text/css" rel="stylesheet" href="./Styles/multiBoxIE6.css" />
<![endif]-->

<script type="text/javascript" src="./Scripts/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="./Scripts/mootools-1.2.4.4-more-yc.js"></script>
<script type="text/javascript" src="./Scripts/overlay.js"></script>
<script type="text/javascript" src="./Scripts/multiBox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	//call multiBox
	var initMultiBox = new multiBox({
		mbClass: '.mb',//class you need to add links that you want to trigger multiBox with (remember and update CSS files)
		container: $(document.body),//where to inject multiBox
		descClassName: 'multiBoxDesc',//the class name of the description divs
		path: './Files/',//path to mp3 and flv players
		useOverlay: true,//use a semi-transparent background. default: false;
		maxSize: {w:600, h:400},//max dimensions (width,height) - set to null to disable resizing
		addDownload: true,//do you want the files to be downloadable?
		pathToDownloadScript: './Scripts/forceDownload.asp',//if above is true, specify path to download script (classicASP and ASP.NET versions included)
		addRollover: true,//add rollover fade to each multibox link
		addOverlayIcon: true,//adds overlay icons to images within multibox links
		addChain: true,//cycle through all images fading them out then in
		recalcTop: true,//subtract the height of controls panel from top position
		addTips: true,//adds MooTools built in 'Tips' class to each element (see: http://mootools.net/docs/Plugins/Tips)
		autoOpen: 0//to auto open a multiBox element on page load change to (1, 2, or 3 etc)
	});
});
</script>
<!-- Copy code above -->

<!-- Styles -->
<style type="text/css">
body{
	font-family:Arial;
}

a.home, a:link.home, a:visited.home, a:hover.home, a:active.home,
a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{
	color:#FF6600;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-decoration:none;
	float:right;
	margin:-13px 0 0 0;
	font-size:10px;
}

a.Download, a:link.Download, a:visited.Download, a:hover.Download, a:active.Download{
	margin:0;
}

a:hover.home, a:hover.Download{
	color:#FFA062;
}
</style>
<!-- Styles -->
</head>


<body style="width:550px; margin:30px auto 0 auto; color:#555;">
<!-- Title -->
<div>
<h1 style="text-align:left; color:#666; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; border-bottom:1px solid #ccc; margin:0; padding:0;">multiBox - for MooTools 1.2 - now with groups!</h1><a href="http://www.liamsmart.co.uk/Downloads/" title="Home" class="home">Home</a>
</div>
<!-- Title -->


<!-- Text -->
<p style="text-align:left; color:#DB572B; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">Old version is now redundant! Please upgrade to this new version.<img src="Images/Star-Icon.jpg" alt="New version with groups!" style="float:right;" title="New version with groups!" /></p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;"><strong>multiBox</strong> is a reworked version of Phatfusion&acute;s brilliant multibox so that it will work with MooTools 1.2. There are many extra options including the option to group elements!</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">Just add a group surrounded by square brackets and the script will only navigate between those with the same group.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">You add the group in the links &lsquo;rel&rsquo; tag. ie: <span style="color:#DB572B;">rel=&quot;[group_one]&quot;</span>.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">On this page, the images are grouped, the flash files are grouped, and the videos are grouped. If no group is specified, multiBox treats the link as a single object and navigation buttons will be disabled.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;"><span style="color:#DB572B;">Another point worth mentioning:</span> you can now override the description on single multiBox element by simply adding &lsquo;noDesc&rsquo; into the &lsquo;rel&rsquo; tag. ie: <span style="color:#DB572B;">rel=&quot;noDesc&quot;</span> or if you have more than one &lsquo;rel&rsquo; value already <span style="color:#DB572B;">rel=&quot;[group_one],noDesc&quot;</span>. This adds flexibility so you are not tied to either using/or not using descriptions on all elements. The second image on this page is using this feature.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">For accessibility &amp; usability purposes, I have also added keyboard shortcuts. <span style="color:#DB572B;">&quot;spacebar&quot;</span> or <span style="color:#DB572B;">&quot;right&quot; = next</span>, <span style="color:#DB572B;">&quot;left&quot; = previous</span> and finally <span style="color:#DB572B;">&quot;esc&quot; = close</span>. Someone pointed out to me that the overlay doesn&acute;t fade away in the same way as it fades in. I have sorted that issue with a simple chain.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">MooTools has a built in <span style="color:#DB572B;">&lsquo;Tips&rsquo;</span> class. This is simply a more stylish way of displaying an elements title tag (plus more if you wanted to expand but I have left it as purely the title tag). Because the code is already in the MooTools library, I thought I may as well include this feature. There is the option to disable it of course.</p>

<p style="text-align:left; color:#999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:10px 0;">People keep asking me how they can get <span style="color:#DB572B;">multiBox to automatically open on pageload</span>. Well it&acute;s easy! There is an option in the usage called <span style="color:#DB572B;">autoOpen</span>, set to <span style="color:#DB572B;">1</span> to open the 1st element, <span style="color:#DB572B;">2</span> to open the 2nd etc. Keep at <span style="color:#DB572B;">0</span> to keep this option inactive.</p>
<!-- Text -->


<!-- Container -->
<div style="margin:10px 0; border-top:1px solid #ccc;">
<!-- Container -->


<!-- Copy code below -->
<h2 style="text-align:left; color:#888; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;">Images</h2>
<a href="./Images/large1.jpg" id="mb1" class="mb" title="Image 1" rel="[images]"><img src="./Images/small1.jpg" alt="Image 1" title="Image 1" /></a>
<div class="multiBoxDesc mb1 mbHidden">This is my description text 1. It can support html.</div>

<a href="./Images/large2.jpg" id="mb2" class="mb" title="Image 2" rel="[images],noDesc"><img src="./Images/small2.jpg" alt="Image 2" title="Image 2" /></a>

<a href="./Images/large3.jpg" id="mb3" class="mb" title="Image 3" rel="[images]"><img src="./Images/small3.jpg" alt="Image 3" title="Image 3" /></a>
<div class="multiBoxDesc mb3 mbHidden">This is my description text 3. It can support html.</div>

<a href="./Images/large4.jpg" id="mb4" class="mb" title="Image 4" rel="[images]"><img src="./Images/small4.jpg" alt="Image 4" title="Image 4" /></a>
<div class="multiBoxDesc mb4 mbHidden">This is my description text 4. It can support html.</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<h2 style="text-align:left; color:#888; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;">Other file extensions</h2>
<a href="./Files/parallax.swf" id="mb5" class="mb" title="Flash" rel="width:700,height:200,[flash]">.swf example</a>
<div class="multiBoxDesc mb5 mbHidden">.swf example by Ashley Warren</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/curly.mov" id="mb6" class="mb" title="Movie" rel="width:400,height:310,[video]">.mov example</a>
<div class="multiBoxDesc mb6 mbHidden">.mov example</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/curly.rmvb" id="mb7" class="mb" title="Real Video" rel="width:400,height:300,[video]">.rmvb example</a>
<div class="multiBoxDesc mb7 mbHidden">.rmvb example</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/curly.wmv" id="mb8" class="mb" title="Windows Media Video" rel="width:400,height:350,[video]">.wmv example</a>
<div class="multiBoxDesc mb8 mbHidden">.wmv example</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/music.mp3" id="mb9" class="mb" title="mp3" rel="[flash]">.mp3 example</a>
<div class="multiBoxDesc mb9 mbHidden">.mp3 example</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/curly.flv" id="mb10" class="mb" title="Flash Video" rel="width:400,height:300,[flash]">.flv example</a>
<div class="multiBoxDesc mb10 mbHidden">.flv example</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="./Files/blank.htm" id="mb11" class="mb" title="iFrame" rel="width:400,height:300">HTML page</a>
<div class="multiBoxDesc mb11 mbHidden">html</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>
  
<a href="./Files/blank-ajax.htm" id="mb12" class="mb" title="AJAX" rel="width:400,height:300,req:true">HTML page (Ajax)</a>
<div class="multiBoxDesc mb12 mbHidden">html (ajax)</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>

<a href="#htmlElement" id="mb13" class="mb" title="HTML element" rel="type:element">HTML element</a>
<div class="multiBoxDesc mb13 mbHidden">html element</div>
<div id="htmlElement" class="mbHidden">
	<p>This is a snippet of html.</p>
	<ul>
		<li>list item 1</li>
		<li>list item 2</li>
	</ul>
    <div style="clear:both;height:0;line-height:0;overflow:hidden;"></div>
</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>
  
<a href="http://www.bbc.co.uk" id="mb14" class="mb" title="iFrame" rel="width:600,height:400">bbc.co.uk</a>
<div class="multiBoxDesc mb14 mbHidden">bbc.co.uk</div>

<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>
<!-- Copy code above -->


<!-- Text -->
<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>
<p style="margin:0;"><a href="http://www.liamsmart.co.uk/Downloads/multiBox/multiBox.zip" title="Download multiBox" class="Download">Download new multiBox</a></p>
<!-- Text -->


<!-- End container -->
<div style="clear:both; height:0; line-height:0; overflow:hidden"></div>
</div>
<!-- End container -->


<!-- Google analytics -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3119950-10");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<!-- Google analytics -->
</body>


</html>